<template>
  <div class="main">
      <h1>简易加法计算器（使用状态管理，请查看demo.js文件）</h1>

      <button @click="dHandle({de: 5})">-</button>
      <span>{{num}}</span>
      <button @click="addHandle">+</button>

      <!-- 想让这里的值大于等于120的时候就停止增加(和上面的值区别开来)，我们可以使用Vuex中的getters -->
      <p>{{num2}}</p>

  </div>
</template>
<script>

// Vuex的辅助函数
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

export default {
  data(){
      return {
          
      }
  },

  // 请结合'./store/index.js查看Vuex状态管理'
  methods: {

    // 点击的时候提交一个mutation，触发对应的事件
    // addHandle(){
    //     this.$store.commit('addIncrement');
    // },

    // 假如上面的代码是异步操作的(ajax)，我们就不能直接提交mutation，应该使用dispatch方法触发actions来提交mutation：
    // addHandle(){
    //     this.$store.dispatch('addAction');
    // },
    
    // 我们使用Vuex的辅助函数来改写addHandle
    ...mapActions({
        addHandle: 'addAction',
    }),

      // 第二个为可选参数，(建议传对象，这样可以传多个参数)
    //   dHandle(){
    //       this.$store.commit('dIncrement', {n: 5});
    //   }

    // 我们也可以这样写，参数为对象格式
    // dHandle(){
    //     this.$store.commit({
    //         type: 'dIncrement',
    //         de: 10,
    //     });
    // }

    // 使用Vuex辅助函数来改写dHandle，参数在html结构中传
    ...mapMutations({
        dHandle: 'dIncrement',
    })

  },
//   computed: {
//       num(){
//           return this.$store.state.count;
//       },
//       num2(){
//           return this.$store.getters.filterCount
//       }
//   }

// 引入了Vuex的辅助函数，我们来改写compouted
    // computed: mapState({
    //     // num: state => state.count
    //     //也可以直接这样写
    //     num: 'count'
    //     // 或者进一步处理
    //     // num(state){
    //     //     return state.count + 500
    //     // }
    // })

// 我们也可以在mapState中传入数组，但是数组中的元素必须和状态的值名称相同。（num改成count，和状态中的count一致才行）
// computed: mapState([
//     'count'
// ])

// 如果计算属性有其他的值，我们可以改写成这样：
computed: {
    abc(){
        return 123
    },
    ...mapGetters({
        num2: 'filterCount'
    }),
    // ...扩展运算符 es6
    ...mapState({
        num: 'count'
    })
}

}
</script>
<style scoped>
    button {
        height: 60px;
        width: 60px;
        font-size: 30px;
    }
    span {
        font-size: 30px;
    }
</style>
